<template>
  <div  style="fontFamily:'Microsoft soft'" class="box">
    <van-sticky>
      <van-search
        v-model.trim="value"
        autofocus
        shape="round"
        show-action
        background="#4fc08d"
        placeholder="搜索歌曲、专辑、歌手"
        @search="onSearch"
        @input="input"
        @clear="clear"
       
       
      >
        <template #action>
          <div @click="onCancel">返回</div>
        </template>
      </van-search>
    </van-sticky>
    <VueMusicSearchSuggest v-show="show"  :suggest="suggest" />
    <div class="result" v-show="!show">
      <VueMusicSearchHistory v-if="flag" />
      <MusicSearchHot :hots="hots" v-if="flag" />
      <MusicSearchResult v-else :value="value" :songs="songs" />
    </div>
  </div>
</template>

<script>
import VueMusicSearchSuggest from "./search_suggest.vue";
import VueMusicSearchHistory from "./search_history.vue";
import MusicSearchHot from "./search_hot.vue";
import MusicSearchResult from "./search_result.vue";
import { mapGetters } from "vuex";
import { GethotAPI, GetsearchAPI, GetsuggestAPI } from "@/api/api.js";
export default {
  name: "MusicSearchBox",
  components: {
    MusicSearchHot,
    MusicSearchResult,
    VueMusicSearchHistory,
    VueMusicSearchSuggest,
  },
  data() {
    return {
      flag: true, //历史和热词 控件
      value: "",
      show: false,
      hots: [], //热词
      songs: [], //音乐结果
      suggest: [],
    };
  },
  created() {
    //nextTick可以在任何位置获取更新后的dom
   this.$nextTick(function () {
      this.hot();
      
   });
  },
  mounted() {},
  computed: {
    ...mapGetters(["History"]),
  },
  methods: {
    // 搜索
    onSearch(val) {
      this.value = val;
      this.flag = false;
      this.show = false;
      GetsearchAPI({ keywords: val, limit: 100 }).then((res) => {
        if (res.status == 200) {
          this.songs = res.data.result.songs;
          this.isHistoryItem(val);
        }
      });
    },
    onCancel() {
      this.$router.go("-1");
    },
    isHistoryItem(val) {
      const list = this.History;
      if (this.History.length == 0) {
        this.$store.commit("SET_SEARCH_HISTORY", val);
        return;
      } else {
        for (let i = 0; i < list.length; i++) {
          const element = list[i];
          if (element == val) {
            list.splice(i, 1);
            list.unshift(val);
            localStorage.setItem("searchHistory", JSON.stringify(list));
            return;
          }
        }
        this.$store.commit("SET_SEARCH_HISTORY", val);
        return;
      }
    },
    hot() {
      GethotAPI().then((res) => {
        this.hots = res.data.data.map((item) => ({ first: item.searchWord }));
      });
    },
    input(val) {
      if (val == "") {
        this.show = false;
        return;
      } else {
        this.show = true;
       
        this.debounceSearch();
      }
    },
  
     debounceSearch:_.debounce(function(){
   
      GetsuggestAPI({ keywords: this.value }).then((res) => {
        if (res.status == 200) {
          this.suggest = res.data.result.allMatch.map((item) => ({
            name: item.keyword,
          }));
        }
      });
    
      },1100),
    clear(){
      this.flag=true
    }
 
  },
};
</script>

<style lang="less" scoped>
.box{
  background-color: #FEFEFE;
}

</style>